import React from "react";
import styles from "./SideMenu.module.css"
import { sideMenuList } from "./mockup"
import { Menu } from "antd"
import { GifOutlined } from "@ant-design/icons";
export const SideMenu: React.FC = () => {
    return (<Menu mode="vertical" className={styles['side-menu']}>
        {
            sideMenuList.map((item, index) =>
                <Menu.SubMenu key={`side-menu-${index}`} title={<span><GifOutlined />{item.title}</span>}>
                    {
                        //secondary menu
                        item.subMenu.map((item1, index1) =>
                            <Menu.SubMenu key={`side-menu-${index1}`} title={<span><GifOutlined />{item1.title}</span>}>
                                {
                                    //thirdary menu
                                    item1.subMenu.map((item2, index2) =>
                                        <Menu.Item key={`side-menu-${index2}`} title={<span><GifOutlined />{item2}</span>}></Menu.Item>
                                    )
                                }
                            </Menu.SubMenu>
                        )
                    }
                </Menu.SubMenu>
            )
        }
    </Menu>)
}